/**
 * Created by Lwang on 2017/2/26.
 */

import $ from "jquery";
/**
 * 去除px并转换为数值
 * @param str
 */
function pxRemove(str) {
    return Number(str.substring(0, str.length - 2))
}
//滚动条高度
function getScrollTop() {
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
    }
    else if (document.body) {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}
/**
 * 获取元素样式
 * @param obj
 * @param attr
 */
function getStyle(obj,attr) {
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return document.defaultView.getComputedStyle(obj,null)[attr];
    }
}
/**
 * 绑定事件
 * @param el
 * @param type
 * @param fn
 */
function bindEv(el, type, fn) {
    if (el.addEventListener) {
        el.addEventListener(type, fn, {
            capture: false,
            passive: false,
            once: false
        });
    } else {
        el["on" + type] = fn;
    }
}

/**
 * 解绑事件
 * @param el
 * @param type
 * @param fn
 */
function unBindEv(el, type, fn) {
    if (el.removeEventListener) {
        el.removeEventListener(type, fn, false);
    } else {
        el["on" + type] = fn;
    }
}

//  获取对象上的类名
function _typeOf(obj) {
    return Object.prototype.toString.call(obj).toLowerCase();
}

//获取位置信息
function getPosInfo(ev) {
    var _touches = ev.touches;
    if (!_touches || _touches.length == 0) {
        return;
    }
    return {
        pageX: ev.touches[0].pageX,
        pageY: ev.touches[0].pageY,
        clientX: ev.touches[0].clientX || 0,
        clientY: ev.touches[0].clientY || 0
    }
}


function MouseWheel(e) {
    e = e || window.event;

    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;

    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;

}

$(function () {

    var y = 0,                                      //触碰位置
        moveY = 0,                                  //移动是的及时位置
        topH = document.querySelector("#j-top").offsetHeight,
        clientH = window.screen.height,
        contentTop = 0,                             //中间内容高度
        oH = 0,
        moveboxH = document.querySelector("#J-wrap").offsetHeight;
    //touchstart
    function touchStart(e) {
        y = e.touches[0].clientY;
        oH = y - document.querySelector("#J-wrap").offsetTop;
        contentTop = document.querySelector("#J-wrap").offsetTop;
        var differ = Math.abs(y - contentTop);
        document.querySelector("#J-wrap").style.top = (y - differ) + "px";
        e.preventDefault();
    }

    //touchmove
    function touchMove(e) {
        var touches = e.touches[0];
        var oTop = touches.clientY - oH;
        if(oTop < topH){
            document.querySelector("#J-wrap").style.top = topH + "px";
        }else if(oTop > (clientH - topH)){
            document.querySelector("#J-wrap").style.top = (clientH - topH) + "px";
        }else{
            document.querySelector("#J-wrap").style.top = oTop + "px";
        }
    }

    //touchend
    function touchEnd(e) {
        var diffarr = [],                                         //存储数组
            min = 0,
            trueIndex = 0,                                          //最小值下标
            domarr = document.querySelector("#j-content").children[0].children,
            endtopH = document.querySelector("#J-wrap").offsetTop,
            len = domarr.length,
            scrollH = getScrollTop(),                   //滚轮高度
            lastH = domarr[len - 1].offsetHeight,
            spaceH = pxRemove(getStyle(domarr[0],"marginBottom")),
            h100 = pxRemove(getStyle(document.querySelector(".h100"),"height")),
            trueTop = 0;
        for (var i = 0; i < len; i++) {
            diffarr.push(Math.abs(domarr[i].offsetTop - scrollH - endtopH - moveboxH / 2));
        }
        min = Math.min.apply(true, diffarr);
        diffarr.map((a, b) => {
            if(min == a)
        {
            trueIndex = b;
        }});


        trueTop  = domarr[trueIndex].offsetTop - moveboxH / 2 - scrollH;

        if(trueTop < topH){
            document.querySelector("#J-wrap").style.top = (domarr[trueIndex + 1].offsetTop - moveboxH / 2 - scrollH ) + "px";
        }else if( trueIndex == len-1 && trueTop> clientH - h100){
            document.querySelector("#J-wrap").style.top = (domarr[trueIndex - 1].offsetTop - moveboxH / 2 - scrollH) + "px";
        }
        else if(trueIndex == len-1 && endtopH + moveboxH /2 > domarr[len - 1].offsetTop + lastH - scrollH){
            document.querySelector("#J-wrap").style.top = (domarr[len - 1].offsetTop + lastH - scrollH -spaceH) + "px";
        }
        else{

            document.querySelector("#J-wrap").style.top = (domarr[trueIndex].offsetTop - moveboxH/2 - scrollH) + "px";
        }
    }


    //点击编辑，状态切换
    $("#j-edit").click(function () {
        $(".move-pos").css("opacity","1");
        var box = $('<div class="aec-choose">'+
            '<label>'+
            '<input type="checkbox" class="aecc-input">'+
            '<span class="aecc-img"></span>'+
            '</label>'+
            '</div>');
        if($("#j-content ul li>.aec-choose").length < 1){
            $("#j-content ul li").append(box).find(".aec-choose").css("display","block");
        }
        $(".ace-con").css("width",(420 / 40) + "rem");
        $(".aec-picture img").css("width",10 + "rem");
        //图片大小处理
        $(".jd-show").show();

        $("#j-complete").css("display","block");
        $("#j-top").css("display","none");
        $('.j-blank').css("height","2.5rem");
        //修改默认获取标题
        $("input.atew-input").val($(".aet-title").html().trim());


        document.querySelector("#J-wrap").addEventListener('touchstart', touchStart);
        document.querySelector("#J-wrap").addEventListener('touchmove', touchMove);
        document.querySelector("#J-wrap").addEventListener('touchend', touchEnd);
    });
    $("#j-completeBtn").click(function () {
        document.querySelector("#J-wrap").removeEventListener('touchstart', touchStart);
        document.querySelector("#J-wrap").removeEventListener('touchmove', touchMove);
        document.querySelector("#J-wrap").removeEventListener('touchend', touchEnd);
        if($("#j-content ul li>.aec-choose").length > 0){
            $("#j-content ul li").find(".aec-choose").remove();
        }
        $(".ace-con").css("width",12 + "rem");
        $(".aec-picture img").css("width",11.45 + "rem");
        $(".jd-show").hide();
        $("#j-complete").css("display","none");
        $("#j-top").css("display","block");
        $('.j-blank').css("height","4rem");
        $(".move-pos").css("opacity","0");
    });

    $(".ber-record").click(function () {
        $(this).css("display","none");
        $(".ber-key").css("display","block");
        $("#j-word").css("display","none");
        $(".no-press").css("display","block");
        $(".has-press").css("display","none");
        $(".be-img").css("display","block");
        $(".be-send").css("display","none");
    });
    $(".ber-key").click(function () {
        $(this).css("display","none");
        $("#j-word").css("display","block");
        $(".ber-record").css("display","block");
        $(".no-press").css("display","none");
        $(".has-press").css("display","none");
        $(".be-img").css("display","none");
        $(".be-send").css("display","block");
    })

});

